<template>
  <view class="ditu" :style="{ height: height + 'px' }">
    <!-- <map style="width: 100%; height: 60%" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="marker" > </map> -->
    <!-- <view class="bottombox"> -->
    <view class="ditu_box">
      <view class="row border-bottom">
        <!-- <view class="red">*</view> -->
        <view class="label">补卡类型</view>
        <picker mode="selector" style="flex-grow: 1; text-align: right" :range="typeList" @change="changetype" range-key="name">
          <view class="picker"> {{ typename ? typename : '请选择补卡类型' }}</view>
        </picker>
      </view>
      <view class="flex j-content row">
        <!-- <view class="red">*</view> -->
        <view class="label">补卡时间</view>
        <view class="ipt" style="text-align: right">
          <leeDatetime @change="startDateChange" placeholder="请选择补卡时间" :value="replaceTime" />
        </view>
      </view>
    </view>

    <view class="ditu_box">
      <view class="label">补卡原因</view>
      <view class="ipt textr">
        <input type="text" placeholder="请输入" v-model="reason" class="" />
      </view>
    </view>
    <view class="ditu_box">
      <view>备注</view>
      <view>
        <input type="text" placeholder="请输入" v-model="remark" class="" />
      </view>
    </view>
    <view class="ditu_box">
      <view class="bold flex"> 照片信息</view>
      <view>
        <view v-show="!imageurl" class="photoinfo" @click="getPhotos">
          <image class="photo" src="/static/image/pic_icon.png" />
        </view>

        <view v-show="imageurl" class="photoinfo">
          <image v-show="imageurl" class="showphoto" :src="imageurl" />
          <view class="del" @click="del">×</view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <button class="btn" @click="submit">提交</button>
    </view>

    <!-- </view> -->
  </view>
</template>

<script>
import { getScreen, saveImage } from '@/service/auth'
import { laterSign } from '@/service/api/signin'
import leeDatetime from '@/components/lee-datetime'
export default {
  components: {
    leeDatetime,
  },
  data() {
    return {
      longitude: '', //经度
      latitude: '', //纬度
      address: '', //详细地址
      address_title: '', //建筑物地址
      scale: 16, //缩放
      height: 0,
      marker: [
        {
          id: 0,
          latitude: '', //纬度
          longitude: '', //经度
          alpha: 1, //透明度
          width: 20,
          height: 30,
        },
      ],
      imageurl: '',
      time: '',
      typeList: [
        { id: 1, name: '上班打卡' },
        { id: 2, name: '下班打卡' },
      ],
      type: '',
      replaceTime: '',
      reason: '',
      remark: '',
      typename: '',
    }
  },
  created() {
    const that = this
    const { height } = getScreen()
    this.height = height
   
  },
  methods: {
    getPhotos() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      const Seconds = date.getSeconds()
      const _this = this

      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera'], //使用相机
        success: function (res) {
          _this.uniShowLoading()
          saveImage(res.tempFilePaths[0]).then(res => {
            _this.imageurl = res
            _this.uniHideLoading()
     
          })
        },
      })
    },
    del() {
      this.imageurl = ''
    },
    submit() {
      if (!this.type) {
        uni.showToast({
          title: '补卡类型不能为空',
          icon: 'none',
        })
        return
      }
      if (!this.replaceTime) {
        uni.showToast({
          title: '补卡时间不能为空',
          icon: 'none',
        })
        return
      }
      if (!this.imageurl) {
        uni.showToast({
          title: '图片不能为空',
          icon: 'none',
        })
        return
      }
      let i = 0
      uni.showLoading({ title: '提交中' })
      //   const sign = setInterval(() => {
      //     i++
      //     if (i >= 10) {
      //       uni.hideLoading('图片保存失败请重新上传')
      //       return clearInterval(sign)
      //     }
      // if (/^http:\/\/[\d\.]+/.test(this.imageurl)) {
      //   clearInterval(sign)
      const data = {
        imgUrl: this.imageurl,
        type: this.type,
        replaceTime: this.replaceTime,
        reason: this.reason,
        remark: this.remark,
      }
      laterSign(data)
        .then(res => {
          uni.hideLoading()
          uni.navigateBack({
            delta: 1,
          })
          uni.showToast({
            title: res.msg,
            icon: 'none',
          })
        })
        .catch(err => {
          uni.hideLoading()
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
      // }
      //   }, 500)
    },
    startDateChange(e) {
      this.replaceTime = e.value
    },
    changetype(e) {
      const index = e.target.value * 1
      this.typename = this.typeList[index].name
      this.type = index + 1
      console.log(this.type)
    },
  },
}
</script>

<style lang="scss" scoped>
.ditu {
  background-color: #f4f5f9;
  padding: 20rpx;
  height: 100vh;
  &_box {
    background-color: white;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    .row {
      display: flex;
      justify-content: space-between;
      height: 80rpx;
      line-height: 80rpx;
    }
    .border-bottom {
      border-bottom: 1rpx solid #f1f1f1;
    }
    .photoinfo {
      height: 150rpx;
      width: 150rpx;
      border-radius: 20rpx;
      position: relative;
      margin-top: 10rpx;
      .photo {
        height: 150rpx;
        width: 150rpx;
      }
      .showphoto {
        border-radius: 20rpx;
        width: 150rpx;
        height: 150rpx;
      }
      .del {
        /* background-color: red; */
        color: white;
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        right: 10rpx;
        top: 5rpx;
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
        font-size: 25rpx;
        line-height: 30rpx;
      }
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    position: absolute;
    height: 150rpx;
    bottom: 0;
    background-color: white;
    left: 0;
    right: 0;
    .btn {
      background-color: #2f6fef;
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      color: white;
      border-radius: 50rpx;
      margin-left: 20rpx;
      margin-right: 20rpx;
    }
  }
}
</style>
